<template lang="pug">
  .reward-frame.page(v-if='isShow')
    //- .content(:class="{'animated bounceInDown': isShow}", :style='styleObj')
    .content(:style='styleObj')
      .ctrl-bar.ctrl-bar-top(@click='isShow = false')
        .icon.close
          i.iconfont &#xe60b;
      .money
        div.mt20.tac
          el-radio-group(
          v-model="paynum",
          @change="changePickerMoney",
          size="small")
            el-radio-button(label="1元")
            el-radio-button(label="2元")
            el-radio-button(label="5元")
            el-radio-button(label="10元")
            el-radio-button(label="20元")
        span.label.mt20 自定金额：
        el-input-number(
          :min="0.1",
          :max="200",
          size="medium",
          v-model="money",
          controls-position="right",
          @change="changeInputMoney",
          label="请输入打赏金额")
      .label 支付方式：
      .payment.clearfix
        .item
          el-radio(v-model="payment", size="mini", label="3", border) 账户余额
        .item(v-if="isWeixin")
          el-radio(v-model="payment", size="mini", label="1", border) 支付宝
        .item
          el-radio(v-model="payment", size="mini", label="2", border) 微信
      .btn-group.pos-a
        el-button(type="primary", round, size="medium", @click="handlePay") 打赏
</template>

<script>
import { isWxBrowser } from '@/utils'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isShow: false,
      isWeixin: true,
      money: 1,
      payment: '3',
      paynum: '1元',
      styleObj: {
        background: `#fcfcfc url(${$globalconfig.URLS.API}krpano/images/redbag_top.png) no-repeat top center`,
        backgroundSize: '100%'
      }
    }
  },
  created() {
    if(isWxBrowser()) {
      this.isWeixin = false
    }
  },
  mounted() {
    this.$vgo.on('payreward:show', () => {
      this.isShow = true
    })

    this.$vgo.on('payreward:success', () => {
      this.isShow = false
    })
  },
  computed: {
    ...mapGetters({
      pano: 'panoInfo'
    })
  },
  methods: {
    showPayReward() {
      if(this.AUTH.checkLogin()) {
        this.isShow = true
      }
    },
    changeInputMoney(val) {
      this.money = parseFloat(val)
    },
    changePickerMoney(val) {
      this.money = parseInt(val)
    },
    handlePay() {
      let options = {
        paytype: Number(this.payment),
        productid: this.$store.getters.panoInfo.pano_id,
        totalfee: this.money,
        return_url: $globalconfig.URLS.PANO_VIEW_PREFIX + this.$store.getters.panoInfo.pano_id
      }

      options.iswx = isWxBrowser() ? 'true' : 'false'
      this.$store.dispatch('payReward', options)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .reward-frame
    .content
      .label
        display: inline-block
        width: 80px
        font-size: 14px
        color: #000
      .money
        margin: 30px 0 10px 0
      .payment
        margin-top: 10px
        .item
          display: inline-block
          margin-bottom: 10px
          margin-right: 5px
      .btn-group
        bottom: 20px
        left: 10px
        right: 10px
        button
          width: 100%
      .ctrl-bar
        top: 5px
        right: 5px
        left: auto
        bottom: auto
        .icon
          border-radius: 0
          background-color: transparent
          i
            font-size: 24px

</style>
